<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>音乐播放器</title>
    <link rel="stylesheet" href="glyphicon.css">
    <style>
        html,body{
            height: 100%;
        }
        body{
            margin: 0;
            background-color: #333;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
            overflow: hidden;
        }
        main{
            width: 300px;
            height: 300px;
            border-radius: 10px;
            box-shadow: 2px 2px 8px #111;
            background-image: url(images/wf.png);
            background-size: 300px 300px;
            text-align: center;
            color: #999;
        }
        .slide{
            animation: slide 0.5s linear;
        }
        @keyframes slide {
            0%{
                background-position: 300px 0px;
            }
            100%{
                background-position: 0px 0px;
            }
        }
        header{
            width: 300px;
            height: 96px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            background-color: rgb(22, 22, 22);
            opacity: 0.95;
        }
        h1,h2{
            margin: 0;
            font-weight: normal;
        }
        h1{
            font-size: 30px;
            padding-top: 30px;
        }
        h2{
            font-size: 15px;  
        }
        progress{
            display: block;
            border: none;
            height: 4px;
            width: 300px;
            background-color: rgb(200, 88, 88);
            opacity: 0.95;
        }
        /*兼容性写法 chrome和safari是webkit内核*/
        /*表示未完成进度的颜色*/
        progress::-webkit-progress-bar{
            background-color: rgb(200, 88, 88);
        }
        /*表示已完成的进度颜色*/
        progress::-webkit-progress-value{
            background-color: green;
        }
        /*兼容性写法，兼容firefox浏览器*/
        /*表示已完成的进度颜色*/
        progress::-moz-progress-bar{
            background-color: green;
        }
        footer{
            height: 200px;
            background-color: rgb(100, 30, 30);
            border-radius: 0 0 10px 10px;
            opacity: 0.95;
            text-align: center;
            color: #aaa;
        }
        time{
            font-size: 32px;
            line-height: 80px;
            /*display: block;*/ 
            /*padding: 24px 0;*/
        }
        #play span:nth-child(1){
            font-size: 32px;
            right: 20px;
            top: -16px;
        }
        #play span:nth-child(2){
            font-size: 64px;
        }
        #play span:nth-child(3){
            font-size: 32px;
            left: 20px;
            top: -16px;
        }
        #volume{
            margin-top: 20px;
        }
        #volume progress{
            display: inline-block;
            width: 100px;
            position: relative;
            bottom: 8px;
            right: 3px;
        }
        footer span:hover{
            color: #fff;
            text-shadow: 0 0 30px #aaa; 
        }
        address{
            font-style: normal;
            color: #555;
            font-size: 14px;
            margin: 100px auto 30px auto;
        }
    </style>
</head>
<body>
    <audio></audio>
    <main>
        <header>
            <h1>传奇</h1>
            <h2>王菲</h2>
        </header>
        <progress value="0"></progress>
        <footer>
            <time>00:00</time>
            <section id="play">
                <span class="glyphicon glyphicon-backward" onclick="prev()"></span>
                <span id="playBtn" class="glyphicon glyphicon-pause" onclick="pauseClick()"></span>
                <span class="glyphicon glyphicon-forward" onclick="next()"></span>
            </section>
            <section id="volume">
                <span class="glyphicon glyphicon-volume-down" onclick="volumeDown()"></span>
                <progress value="0.2"></progress>
                <span class="glyphicon glyphicon-volume-up" onclick="volumeUp()"></span>
            </section>
        </footer>
    </main>
    <address>Powerd By Zhiyou</address>
</body>
</html>
<script>
    var player = document.querySelector('audio');
    var main = document.querySelector('main');
    var h1 = document.querySelector('h1');
    var h2 = document.querySelector('h2');
    // 显示播放时间
    var time = document.querySelector('time');
    // 控制播放/暂停的span标签
    var playBtn = document.querySelector('#playBtn');
    // 显示播放进度的进度条
    var progress = document.querySelectorAll('progress')[0];
    // 显示声音大小的进度条
    var volume = document.querySelectorAll('progress')[1];
    // 播放列表
    var list = [{ 
        name: '传奇', 
        singer: '王菲', 
        src: 'music/传奇.mp3', 
        cover: 'images/wf.png' 
    },{ 
        name: '知道不知道', 
        singer: '刘若英', 
        src: 'music/知道不知道.mp3', 
        cover: 'images/lry.jpg' 
    }];
    // 用来表示当前播放歌曲的索引值
    var current = 0;
    // 把播放器初始的音量值设置为0.5
    // 设置音量的进度条为0.5 
    volume.value = player.volume = 0.5;

    // 开始播放音乐
    function start(){
        // 取出一首歌，包含歌曲名、歌曲的资源路径等
        var song = list[current];
        // 歌曲名
        h1.innerHTML = song.name;
        // 歌手名
        h2.innerHTML = song.singer;
        // 歌曲封面图片
        main.style.backgroundImage = 'url(' + song.cover + ')';  
        // 添加slide类名，实现封面移动的动画效果， 
        main.className = 'slide';  

        // 加载歌曲资源
        player.src = song.src;
        player.play();
        // 只要是播放状态，就改为暂停的字体图标
        playBtn.className = 'glyphicon glyphicon-pause';

        // 延迟0.5秒清除下动画效果，否则下次切换不会出现效果
        setTimeout(function(){
            main.className = '';
        } ,500);
    }
    start();

    // 更新播放时间
    function updateTime(){
        // 当前播放时间，单位：秒
        var curTime = player.currentTime;
        // 总的播放时间。单位：秒
        var durTime = player.duration;
        // console.log(curTime);
        // console.log(durTime);
        // 播放进度 = 播放时间 / 总播放时间
        if(durTime > 0){
            progress.value = curTime / durTime;
        }

        var times = Math.floor(curTime);
        // 转化成秒数
        var seconds = times % 60;
        // 转化成分钟数
        var minutes = Math.floor(times/60);
        minutes = minutes<10 ? '0'+minutes : minutes;
		seconds = seconds<10 ? '0'+seconds : seconds;
        time.innerHTML = minutes + ':' + seconds;
    }
    // timeupdate 事件在音频/视频（audio/video）的播放位置发生改变时触发。
    // timeupdate 当audio的播放时间发生变化时，触发的事件
    // 监听当前播放器播放时间的变化，只要播放时间发生变，就会调用updateTime方法 
    player.addEventListener('timeupdate',updateTime);

    // 暂停/播放
    function pauseClick(){
        if(player.paused == true){
            //暂停状态，点击按钮开始播放
            player.play();
            // 播放时，字体图标样式应该为暂停的图标
            playBtn.className = 'glyphicon glyphicon-pause';
        }else{
            //播放状态，点击按钮暂停
            player.pause();
            // 暂停时，字体图标样式应该为播放的图标
            playBtn.className = 'glyphicon glyphicon-play';
        }
    }

    // 上一曲
    function prev(){
        if(current > 0){
            current --;
        }else{
            current = list.length - 1;
        }
        console.log(current);
        // 切换完毕，重新调用start方法，加载新的歌曲信息
        start();
        updateTime()
    }
    // 下一曲
    function next(){
        if(current < list.length - 1){
            current ++;
        }else{
            current = 0;
        }
        console.log(current);
        start();
        updateTime()
    }
    // ended 当audio的音频播放完毕时，触发的事件
    // 监听歌曲是否播放完毕，当歌曲播放完毕时，自动调用next方法，去播放下一首
    player.addEventListener('ended',next);

    // 音量+
    function volumeUp(){
        if(player.volume <= 0.9){
            player.volume += 0.1;
        }
    }
    // 音量-
    function volumeDown(){
        if(player.volume >= 0.1){
            player.volume -= 0.1;
        }
    }
    // 更新声音
    function updateVolume(){
        // 把音量的值赋值给进度条
        // console.log(player.volume)
        volume.value = player.volume;
    }
    // volumechange 当audio的音量大小发生变化时触发的事件
    // 当播放的音量大小发生变化，调用updateVolume方法
    player.addEventListener('volumechange',updateVolume);
</script>